<%@page import="com.google.appengine.api.users.User"%>
<%@page import="com.google.appengine.api.users.UserServiceFactory"%>
<%@page import="com.google.appengine.api.users.UserService"%>
<%@page import="com.tubeilike.model.CategoryModel"%>
<%@page import="com.tubeilike.entity.Category"%>
<%
	UserService userService = UserServiceFactory.getUserService();
	User user = userService.getCurrentUser();
%>
<%
	if(user!=null){
%>
<script type="text/javascript">	
	$(document).ready(function(){   		
		$('#categoryDetail').hide();
        $.get('/admin/category/all',{ categoryAlias: $('#categoryList').val(), page: 1}, function(data) {           	  
       		var result = jQuery.parseJSON(data);	           		
       		var haveMore = false;
       		var toDisplay = '<ul id=\"sortable2\" class=\'droptrue\' title=\''+ 'Videos of category' + '\' >';          		
	           	for(var i =0;i < result.listTube.length;i++)
				{
	           		var item = result.listTube[i];	  
	           		toDisplay += '<li id=\"' + result.listTube[i].tubeId + '\">';
	           		toDisplay += '<div class=\"social-box\" onmouseover=\"style.backgroundColor=\'#B8B8B8\'\" onmouseout=\"style.backgroundColor=\'#F5F5F5\'\">';	           		
	           		toDisplay += '\t<a href=\"/category/\" title=\"\"></a>\n';
	           		toDisplay += '\t\t<img src=\"'+ result.listTube[i].thumbImageUrl.value +'\" alt=\"'+ result.listTube[i].title.value +'\" style=\"max-width: 60px; padding-top:3px\" />';
	           		toDisplay += '\t\t\t<div class=\"social-box-text\">\n';
	           		toDisplay += '\t\t\t\t<div style=\"float:left\"title=\"'+ result.listTube[i].title.value +'\">\n';
	           		toDisplay += '\t\t\t\t\t<p>'+ result.listTube[i].title.value +'</p>\n';	           		
	           		toDisplay += '\t\t\t\t</div>\n';
	           		toDisplay += '\t\t\t\t<div style=\"float:right\"\title=\"Remove this video from category\">\n';
	           		toDisplay += '\t\t\t\t\t<img class=\"deleteIcon\" id=\"' + result.listTube[i].tubeId + '\" title=\"remove ' +result.listTube[i].title.value + '\" alt=\"'+ result.listTube[i].title.value +'\" style=\"width:10px\" src=\"/images/delete_icon.jpg\"/>';	           		
	           		toDisplay += '\t\t\t\t</div>\n';
	           		toDisplay += '\t\t\t</div>\n';
	           		toDisplay += '</div>\n';
	           		toDisplay += '</li>';
	           		if(i==9){
	           			haveMore = true;	           			
	           		}
	           		/*check if exits element with id  */
	           		if($('#' + result.listTube[i].tubeId).length > 0){
		           		$('#' + result.listTube[i].tubeId).remove();
		           	}		           	
				}	           		           
	           	toDisplay += '</ul>';
	           	if(haveMore){
	           		toDisplay += '<div id=\"showMoreButton\" style=\"color:#B01E33; margin : 5px 5px 5px 85px\">Show more video</div>';
	           	}
	           	toDisplay += '<div id=\"currentPage\" title=\"0\">&nbsp</div>';
	           	$('#categoryDetail').html(toDisplay);
	           	$('#categoryDetail').fadeIn(2000);		         
	           	
	           	$(function() {
	           		$('#sortable1 > li').draggable({helper:'clone',connectToSortable:'#sortable2'});
	    			$('ul.droptrue').sortable({
	    				connectWith: 'ul',
	    				opacity: 0.6,	
	    				start: function(event, ui){
	    					
	    				},  update: function(event, ui) {		    					
	    		         	$.get('/admin/category/add_video', {
	    						tubeId : $(ui.item).attr('id'),
	    						prevId : $(ui.item).prev().attr('id'),
	    						nextId : $(ui.item).next().attr('id'),
	    						categoryAlias : $('#categoryList').val()    						
	    					}, function(data) {			    										    				
	    						$("#messageBox").html(data);
		    					$("#messageBox").show().delay(2000).fadeOut();
	    					});
	    		        },
	    				stop : function(event, ui){
	    					/*if drag inside  */
	    					if($(ui.item).find('.social-box').length>0){
	    						
	    					}	    						
	    					/*if drag outside  */
	    					else{	 	    						
	    						var id = $(ui.item).attr('id');	    	    						
	    						if($('ul.droptrue').find('#' + id).length > 1){	 	    								 	    						   	          
	    							$('ul.droptrue').find('#' + id).remove();
	    			            }else{	  	    			            	
	    			            	toDisplay = '';	    					
			    	           		toDisplay += '<div class=\"social-box\" onmouseover=\"style.backgroundColor=\'#B8B8B8\'\" onmouseout=\"style.backgroundColor=\'#F5F5F5\'\">\n';	           		
			    	           		toDisplay += '\t<a href=\"/category/\" title=\"\"></a>\n';
			    	           		toDisplay += '\t\t<img src=\"'+ $(ui.item).find('img').attr('src') +'\" alt=\"'+ $(ui.item).find('.content').attr('title') +'\" style=\"max-width: 60px; padding-top:6px\" />';
			    	           		toDisplay += '\t\t\t<div class=\"social-box-text\">\n';			    	           		
			    	           		toDisplay += '\t\t\t\t<div title=\"'+ $(ui.item).find('.content').attr('title') +'\">\n';
			    	           		toDisplay += '\t\t\t\t\t<p>'+ $(ui.item).find('.content').attr('title') +'</p>\n';	           		
			    	           		toDisplay += '\t\t\t\t</div>\n';
			    	           		toDisplay += '\t\t\t\t<div style=\"float:right\"\title=\"Remove this video from category\">\n';
			    	           		toDisplay += '\t\t\t\t\t<img onclick=\"deleteFunction()\" class=\"deleteIcon\" id=\"' + id + '\" title=\"remove ' + $(ui.item).find('.content').attr('title') + '\" alt=\"'+ $(ui.item).find('.content').attr('title') +'\" style=\"width:10px\" src=\"/images/delete_icon.jpg\"/>';	           		
			    	           		toDisplay += '\t\t\t\t</div>\n';
			    	           		toDisplay += '\t\t\t</div>\n';
			    	           		toDisplay += '</div>\n';				    	           		
			    	           		$('#sortable1').find('#' + $(ui.item).attr('id')).remove();
			    		            ui.item.html(toDisplay);
			    		            $('li#' + $(ui.item).attr('id')).removeAttr('style') ;
	    			            }	
	    						$('li#' + $(ui.item).attr('id')).effect("highlight", {color: '#66CC66'}, 1500);  
	    					}	    					
	    		        }

	    			});		
	    			$("#sortable1, #sortable2").css('minHeight',$("#sortable1").height()+"px");	
	    		});  						         
       	});
    });
	$('#showMoreButton').live('click',function(e){
		var currentPage = parseInt($('#currentPage').attr('title'));		
	   	$.get('/admin/category/all', {	
	   		page : (currentPage+1),
			categoryAlias : $('#categoryList').val()  						
		}, function(data) {
			$('#showMoreButton').remove();			
			var result = jQuery.parseJSON(data);							
			var toDisplay = "";			
			for(var i =0;i < result.listTube.length;i++)
			{				
           		var item = result.listTube[i];	  
           		toDisplay += '<li id=\"' + result.listTube[i].tubeId + '\">';
           		toDisplay += '<div class=\"social-box\" onmouseover=\"style.backgroundColor=\'#B8B8B8\'\" onmouseout=\"style.backgroundColor=\'#F5F5F5\'\">\n';	           		
           		toDisplay += '\t<a href=\"/category/\" title=\"\"></a>\n';
           		toDisplay += '\t\t<img src=\"'+ result.listTube[i].thumbImageUrl.value +'\" alt=\"'+ result.listTube[i].title.value +'\" style=\"max-width: 60px; padding-top:6px\" />';
           		toDisplay += '\t\t\t<div class=\"social-box-text\">\n';
           		toDisplay += '\t\t\t\t<div style=\"float:left\"\title=\"'+ result.listTube[i].title.value +'\">\n';
           		toDisplay += '\t\t\t\t\t<p>'+ result.listTube[i].title.value +'</p>\n';	           		
           		toDisplay += '\t\t\t\t</div>\n';
           		toDisplay += '\t\t\t\t<div style=\"float:right\"\title=\"Remove this video from category\">\n';
           		toDisplay += '\t\t\t\t\t<img class=\"deleteIcon\" id=\"' + result.listTube[i].tubeId + '\" title=\"remove ' +result.listTube[i].title.value + '\" alt=\"'+ result.listTube[i].title.value +'\" style=\"width:10px\" src=\"/images/delete_icon.jpg\"/>';	           		
           		toDisplay += '\t\t\t\t</div>\n';
           		toDisplay += '\t\t\t</div>\n';
           		toDisplay += '</div>\n';
           		toDisplay += '</li>';
           		if(i==9){
           			toDisplay += '<div id=\"showMoreButton\" style=\"color:#B01E33; margin : 5px 5px 5px 85px\">Show more video</div>';
           		}
           		/*check if exits element with id  */
           		if($('#' + result.listTube[i].tubeId).length > 0){
	           		$('#' + result.listTube[i].tubeId).remove();
	           	}		           		
			}								
			$('#sortable2').append(toDisplay).fadeIn('slow');
		});
		$('#currentPage').attr('title', currentPage + 1);
  	});	
	$('.deleteIcon').live('click',function(e){ 
		var id = $(this).attr('id');
	   $.get('/admin/category/remove_video', {
			tubeId : id,			
			categoryAlias : $('#categoryList').val()  						
		}, function(data) {
			$('#sortable2').find('#' + id).fadeOut(1500);
			$('#sortable2').find('#' + id).html(data);				
			$('#sortable2').find('#' + id).show().delay(3000).fadeOut();			
			$("#sortable2").css('minHeight',($("#sortable2").height()- 20) + 'px');
		});
  	});	
	$('#categoryList').live('change',function(e){             
		$('#categoryDetail').hide();
           $.get('/admin/category/all',{ categoryAlias: $('#categoryList').val(), page : 1}, function(data) {           	  
          		var result = jQuery.parseJSON(data);	           		
          		var toDisplay = '<ul id=\"sortable2\" class=\'droptrue\' title=\''+ 'no title' + '\'>';          		
	           	for(var i =0;i < result.listTube.length;i++)
				{
	           		var item = result.listTube[i];	  
	           		toDisplay += '<li id=\"' + result.listTube[i].tubeId + '\">';
	           		toDisplay += '<div class=\"social-box\" onmouseover=\"style.backgroundColor=\'#B8B8B8\'\" onmouseout=\"style.backgroundColor=\'#F5F5F5\'\">\n';	           		
	           		toDisplay += '\t<a href=\"/category/\" title=\"\"></a>\n';
	           		toDisplay += '\t\t<img src=\"'+ result.listTube[i].thumbImageUrl.value +'\" alt=\"'+ result.listTube[i].title.value +'\" style=\"max-width: 60px; padding-top:6px\" />';
	           		toDisplay += '\t\t\t<div class=\"social-box-text\">\n';
	           		toDisplay += '\t\t\t\t<div style=\"float:left\"\title=\"'+ result.listTube[i].title.value +'\">\n';
	           		toDisplay += '\t\t\t\t\t<p>'+ result.listTube[i].title.value +'</p>\n';	           		
	           		toDisplay += '\t\t\t\t</div>\n';
	           		toDisplay += '\t\t\t\t<div style=\"float:right\"title=\"Remove this video from category\">\n';
	           		toDisplay += '\t\t\t\t\t<img class=\"deleteIcon\" id=\"' + result.listTube[i].tubeId + '\" title=\"remove ' +result.listTube[i].title.value + '\" alt=\"'+ result.listTube[i].title.value +'\" style=\"width:10px\" src=\"/images/delete_icon.jpg\"/>';	           		
	           		toDisplay += '\t\t\t\t</div>\n';
	           		toDisplay += '\t\t\t</div>\n';
	           		toDisplay += '</div>\n';
	           		toDisplay += '</li>';
	           		if(i==9){
	           			toDisplay += '<div id=\"showMoreButton\" style=\"color:#B01E33; margin : 5px 5px 5px 85px\">Show more video</div>';
	           		}
	           		/*check if exits element with id  */
	           		if($('#' + result.listTube[i].tubeId).length > 0){
		           		$('#' + result.listTube[i].tubeId).remove();
		           	}		           	
				}	           		     
	           	toDisplay += '</ul>';	      
	        	toDisplay += '<div id=\"currentPage\" title=\"0\">&nbsp</div>';
	           	$('#categoryDetail').html(toDisplay);
	           	$('#categoryDetail').fadeIn(2000);		     
	           	
	           	$(function() {	           		
	           		$('#sortable1 > li').draggable({helper:'clone',connectToSortable:'#sortable2'});
	    			$('ul.droptrue').sortable({
	    				connectWith: 'ul',
	    				opacity: 0.6,	
	    				start: function(event, ui){
	    					
	    				},  update: function(event, ui) {		    					
	    		         	$.get('/admin/category/add_video', {
	    						tubeId : $(ui.item).attr('id'),
	    						prevId : $(ui.item).prev().attr('id'),
	    						nextId : $(ui.item).next().attr('id'),
	    						categoryAlias : $('#categoryList').val(), 	    						
	    					}, function(data) {			    						
	    						$("#messageBox").html(data);
		    					$("#messageBox").show().delay(2000).fadeOut();
	    					});
	    		        },
	    				stop : function(event, ui){
	    					/*if drag inside  */
	    					if($(ui.item).find('.social-box').length>0){
	    						
	    					}	    						
	    					/*if drag outside  */
	    					else{	 	    						
	    						var id = $(ui.item).attr('id');	    	    						
	    						if($('ul.droptrue').find('#' + id).length > 1){	 	    								 	    						   	          
	    							$('ul.droptrue').find('#' + id).remove();
	    			            }else{	  	    			            	
	    			            	toDisplay = '';	    					
			    	           		toDisplay += '<div class=\"social-box\" onmouseover=\"style.backgroundColor=\'#B8B8B8\'\" onmouseout=\"style.backgroundColor=\'#F5F5F5\'\">\n';	           		
			    	           		toDisplay += '\t<a href=\"/category/\" title=\"\"></a>\n';
			    	           		toDisplay += '\t\t<img src=\"'+ $(ui.item).find('img').attr('src') +'\" alt=\"'+ $(ui.item).find('.content').attr('title') +'\" style=\"max-width: 60px; padding-top:4px\" />';
			    	           		toDisplay += '\t\t\t<div class=\"social-box-text\">\n';			    	           		
			    	           		toDisplay += '\t\t\t\t<div title=\"'+ $(ui.item).find('.content').attr('title') +'\">\n';
			    	           		toDisplay += '\t\t\t\t\t<p>'+ $(ui.item).find('.content').attr('title') +'</p>\n';	           		
			    	           		toDisplay += '\t\t\t\t</div>\n';
			    	           		toDisplay += '\t\t\t\t<div style=\"float:right\"\title=\"Remove this video from category\">\n';
			    	           		toDisplay += '\t\t\t\t\t<img class=\"deleteIcon\" id=\"' + id + '\" title=\"remove ' +$(ui.item).find('.content').attr('title') + '\" alt=\"'+ $(ui.item).find('.content').attr('title') +'\" style=\"width:10px\" src=\"/images/delete_icon.jpg\"/>';	           		
			    	           		toDisplay += '\t\t\t\t</div>\n';
			    	           		toDisplay += '\t\t\t</div>\n';
			    	           		toDisplay += '</div>\n';				    	           		
			    	           		$('#sortable1').find('#' + $(ui.item).attr('id')).remove();
			    		            ui.item.html(toDisplay);
			    		            $('li#' + $(ui.item).attr('id')).removeAttr('style') ;
	    			            }		    						
	    					}	    					
	    		        }

	    			});		
	    			$("#sortable1, #sortable2").css('minHeight',$("#sortable1").height()+"px");	
	    		});  						         
          	});
       });
		
</script>
<%
	
%>
<h2 class="title-line"><a href="/admin/category/manager">Category Manager</a></h2>	
<div>
	<select name="categoryList" id="categoryList" title="Choose category to add videos">	
		<option value="select">(Select category)</option>						
		<%
		for (Category cate : CategoryModel.all()) {
		%>
			<option value="<%=cate.getAlias()%>"><%=cate.getSubTitle() %></option>
		<%
			}
		%>						  						
	</select> 	
	&nbsp;or <a href="/admin/category/create">Create new</a>			
</div>
<div id="messageBox">
	
</div>
<div id="categoryDetail" style="display: none; height: 680px; overflow-y: auto; margin-top: 10px">	
</div>		
<%
	}
%>